<template>
  <el-card>
    <el-button
      @click="$router.push('/goods/add')"
      type="primary"
      icon="el-icon-circle-plus-outline"
    >添加</el-button>
    <el-divider />
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="firstcatename" label="一级分类" width="100"></el-table-column>
      <el-table-column prop="secondcatename" label="二级分类" width="100"></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="100"></el-table-column>
      <el-table-column prop="img" label="商品名称" width="100">
        <template v-slot="scope">
          <!-- 注意:需要将相对路径转换成绝对路径 -->
          <el-image :src="$imgBaseUrl+scope.row.img" width="120px"></el-image>
        </template>
      </el-table-column>

      <el-table-column prop="price" label="商品价格"></el-table-column>
      <el-table-column prop="market_price" label="市场价格"></el-table-column>
      <el-table-column prop="isnew" label="是否新品">
        <template v-slot="scope">
          <el-switch
            @change="attrSwitch(scope.row,'isnew')"
            v-model="scope.row.isnew"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖">
        <template v-slot="scope">
          <el-switch
            @change="attrSwitch(scope.row,'ishot')"
            v-model="scope.row.ishot"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
          <el-tag type="error" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="100" fixed="right" label="操作">
        <template v-slot="scope">
          <el-button
            circle
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="edit(scope.row.id)"
          ></el-button>
          <el-button
            circle
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="del(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="pageUpdate"
      :page-size="size"
      background
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      // 页码
      page: 1,
      // 每页显示数据条数
      size: 5,
      // 商品列表数组
      list: [],
      // 数据总条数
      total: 0
    };
  },
  methods: {
    // 获取商品列表
    async getGoodsList() {
      const res = await this.$http.get("/api/goodslist", {
        params: { page: this.page, size: this.size }
      });
      this.list = res.list;
      console.log(res.list);
    },
    // 获取数据总条数
    async getTotal() {
      const res = await this.$http.get("/api/goodscount");
      this.total = res.list[0].total;
    },
    // 监听页码的更新
    pageUpdate(page) {
      // 1-更新data中的page
      this.page = page;
      // 2-重新请求列表
      this.getGoodsList();
    },
    // 更新商品状态(ishot;isnew)
    async attrSwitch(row, attr) {
      // 必须使用FormData的方式进行数据提交
      const fd = new FormData();
      fd.append("id", row.id);
      fd.append(attr, row[attr]);
      const res = await this.$http.post("/api/goodsedit", fd);
      if (res.code == 200) {
        this.$success("操作成功");
      } else {
        this.$error("操作失败");
      }
    },
    edit(id) {},
    del(id) {
        this.$myConfirm(()=>{
            // 发送数据请求, 删除数据
            this.$http.post('/api/goodsdelete',{id});
            // 移除页面中被删除的商品:1-重新请求数据列表(缺点:性能不好);2-删除页面中被删除的数据(删除数组元素)
            // 通过id获取元素索引
            const index=this.list.findIndex(item=>item.id==id);
            //通过splice方法删除数组元素
            this.list.splice(index,1);

        });
    }
  },
  created() {
    this.getGoodsList();
    this.getTotal();
  }
};
</script>

<style>
</style>